<%@page import="com.hzdl.apple.bean.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:include page="header.jsp"></jsp:include>
<!DOCTYPE html>

<html lang="en">

<head>

<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="${path }/css/info/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="${path }/css/info/font-awesome.css" rel="stylesheet"> 
<link rel="stylesheet" href="${path }/css/info/lightbox.css" type="text/css" media="all" /><!--gallery-popup-css-->
<link href="${path }/css/info/popuo-box.css" rel="stylesheet" type="text/css" media="all" /><!-- Pop-up -->
<link href="${path }/css/info/style.css" rel="stylesheet" type="text/css" media="all" />
<!--fonts-->
<link href="http://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
<!--//fonts-->



	

		<!-- Google Fonts -->
		<link href='https://fonts.googleapis.com/css?family=Karla:400,400i,700%7CLato:300,400,400i,700' rel='stylesheet'>

		<!-- Css -->
		<link rel="stylesheet" href="${path }/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${path }/css/magnific-popup.css" />
		<link rel="stylesheet" href="${path }/css/font-icons.css" />
		<link rel="stylesheet" href="${path }/css/sliders.css" />
		<link rel="stylesheet" href="${path }/css/style.css" />

		<!-- Favicons -->
		<link rel="shortcut icon" href="${path }/img/favicon.ico">
		<link rel="apple-touch-icon" href="${path }/img/apple-touch-icon.png">
		<link rel="apple-touch-icon" sizes="72x72" href="${path }/img/apple-touch-icon-72x72.png">
		<link rel="apple-touch-icon" sizes="114x114" href="${path }/img/apple-touch-icon-114x114.png">


</head>

<body>
<!-- banner -->

	<div class="banner" id="home" >
	
			<div class="header">
				
				<div class="w3_menu">
					<div class="mobile-nav-button">
						<div class="mobile-nav-button__line"></div>
						<div class="mobile-nav-button__line"></div>
						<div class="mobile-nav-button__line"></div>
					</div>
					
					<nav class="mobile-menu">
						<ul>
							<li><a href="#home" class="active scroll" >Home</a></li>
							<li><a href="#about" class="scroll" >About</a></li>
							<li><a href="${path }/home/index" class="scroll" >Skills</a></li>
							<li><a href="#work" class="scroll" >Education</a></li>
							<li><a href="#gallery" class="scroll" >Gallery</a></li>
							<li><a href="#contact" class="scroll" >Contact</a></li>
						</ul>
							<div class="clearfix"></div>
						<div class="search-agileits">			
							<form action="#" method="post">
								<input type="search" name="Search" placeholder=" " required="">
								<input type="submit" value="Search">
							</form>
						</div>
					</nav>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="agile_banner_info">
			<%
		User user = (User)session.getAttribute("user");
		
		if( user != null){
		
	%>
			<h2><span>HI! I'm</span> <%=user.getUName() %></h2>
				<div id="typed-strings" class="agileits_w3layouts_strings">
						<p>I WANT BUY <i>IPHONE XS</i></p>
						<p>I WANT BUY <i>MACBOOK</i></p>
						<p>I WANT BUY <i>IPAD PRO</i></p>
					</div>
				<span id="typed" style="white-space:pre;"></span>
				<p class="banner-p-w3ls">Nam arcu mauris, tincidunt Cras sapien urna, malesuada ut varius consequat.</p>
			</div>
			<div class="w3_agileits_social_media">
				<ul>
					<li><a href="#" class="wthree_facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
					<li><a href="#" class="wthree_twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
					<li><a href="#" class="wthree_dribbble"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
					<li><a href="#" class="wthree_behance"><i class="fa fa-behance" aria-hidden="true"></i></a></li>
				</ul>
			</div>
			<div class="banner-image-w3layouts">
				<img src="${path }/img/info/men.png" alt=" " class="img-responsive" />
			</div>
	</div>
<!-- //banner -->
<!-- about -->
<div class="about" id="about">
	<div class="col-md-6 about-left-w3ls">
		<h5>Follow <br>me on <br><span>Apple</span><i class="fa fa-twitter" aria-hidden="true"></i></h5>
	</div>
		<div class="col-md-6 person-info-agileits-w3layouts">
		<h3 class="w3_head w3_head1">About Me </h3>
		<p><span>Hi!, Iam  <%=user.getUName() %></span>Nam arcu mauris, tincidunt sed convallis non, egestas ut lacus. Cras sapien urna, malesuada ut varius consequat, hendrerit nisl. Aliquam vestibulum, odio non ullamcorper malesuada.Nam arcu mauris, tincidunt sed convallis non, egestas ut lacus.</p>
			
			<ul>
				<li><span >UName</span>: <%=user.getUName() %></li>
				<li><span>ID</span>: <%=user.getULoginId() %></li>
				
				<li><span>Phone</span>: <%=user.getUPhoneNum() %></li>
				
				<li><span>Address</span>: <%=user.getUAddress() %></li>
				<li><a href="#" class="botton-w3ls">Download CV</a>
					<a href="#small-dialog" class="play-icon popup-with-zoom-anim botton-w3ls">Watch my video</a>
				</li>
			</ul>
			<a href="index.jsp" style="margin-left: 40px;"><font size="5"><i>返回主页</i></font></a>
		</div>
	<div class="clearfix"></div>
	
</div>

<!-- //about-bottom -->

				

<!-- js -->
<script type="text/javascript" src="${path }/js/info/jquery-2.1.4.min.js"></script>


<!-- Navigation-JavaScript -->
<!-- menu -->
<script>
	$(document).ready(function () {
	  $('.mobile-nav-button').on('click', function() {
	  $( ".mobile-nav-button .mobile-nav-button__line:nth-of-type(1)" ).toggleClass( "mobile-nav-button__line--1");
	  $( ".mobile-nav-button .mobile-nav-button__line:nth-of-type(2)" ).toggleClass( "mobile-nav-button__line--2");  
	  $( ".mobile-nav-button .mobile-nav-button__line:nth-of-type(3)" ).toggleClass( "mobile-nav-button__line--3");  
	  
	  $('.mobile-menu').toggleClass('mobile-menu--open');
	  return false;
	}); 
	});
</script>
<!-- //menu -->
<!-- Gallery-plugin -->
<script src="${path }/js/info/jquery.mobile.custom.min.js"></script>
<script src="${path }/js/info/jquery.cm-overlay.js"></script>
		<script>
			$(document).ready(function(){
				$('.cm-overlay').cmOverlay();
			});
		</script>
<!-- //Gallery-plugin -->
<!-- responsiveslides -->
<script src="${path }/js/info/responsiveslides.min.js"></script>
			<script>
									// You can also use "$(window).load(function() {"
									$(function () {
									 // Slideshow 4
									$("#slider3").responsiveSlides({
										auto: true,
										pager: false,
										nav: true,
										speed: 500,
										namespace: "callbacks",
										before: function () {
									$('.events').append("<li>before event fired.</li>");
									},
									after: function () {
										$('.events').append("<li>after event fired.</li>");
										}
										});
										});
			</script>
<!-- //responsiveslides -->

	<!-- //Navigation-JavaScript -->
<!--pop-up-box -->
					<script src="${path }/js/info/jquery.magnific-popup.js" type="text/javascript"></script>
					<script>
					$(document).ready(function() {
					$('.popup-with-zoom-anim').magnificPopup({
					type: 'inline',
					fixedContentPos: false,
					fixedBgPos: true,
					overflowY: 'auto',
					closeBtnInside: true,
					preloader: false,
					midClick: true,
					removalDelay: 300,
					mainClass: 'my-mfp-zoom-in'
					});

					});
					</script>
<!-- //pop-up-box -->

<!-- banner-type-text -->
	<script src="${path }/js/info/typed.js" type="text/javascript"></script>
    <script>
		$(function(){

			$("#typed").typed({
				// strings: ["Typed.js is a <strong>jQuery</strong> plugin.", "It <em>types</em> out sentences.", "And then deletes them.", "Try it out!"],
				stringsElement: $('#typed-strings'),
				typeSpeed: 30,
				backDelay: 500,
				loop: false,
				contentType: 'html', // or text
				// defaults to false for infinite loop
				loopCount: false,
				callback: function(){ foo(); },
				resetCallback: function() { newTyped(); }
			});

			$(".reset").click(function(){
				$("#typed").typed('reset');
			});

		});

		function newTyped(){ /* A new typed object */ }

		function foo(){ console.log("Callback"); }
    </script>
<!-- //banner-type-text -->
<!-- jarallax-js -->
			<script src="${path }/js/info/SmoothScroll.min.js"></script>
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="${path }/js/info/move-top.js"></script>
<script type="text/javascript" src="${path }/js/info/easing.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- start-smoth-scrolling -->
	<!-- smooth scrolling -->
	<script type="text/javascript">
		$(document).ready(function() {
		/*
			var defaults = {
			containerID: 'toTop', // fading element id
			containerHoverID: 'toTopHover', // fading element hover id
			scrollSpeed: 1200,
			easingType: 'linear' 
			};
		*/								
		$().UItoTop({ easingType: 'easeOutQuart' });
		});
	</script>
	
	<div class="arr-w3ls">
	<a href="#home" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
	</div>
<!-- //smooth scrolling -->


<script type="text/javascript" src="${path }/js/info/bootstrap-3.1.1.min.js"></script>
  <%
		}
	%>								
</body>
</html>